
<template>
<view>
<block v-if="showErrorMsg">
    <!--dialog-->
    <view class="js_dialog" id="iosDialog1">
      <view class="weui-mask"></view>
      <view class="weui-dialog style2 rule">
        <view class="weui-icon_area">
          <view class="iconbg"></view>
          <icon class="icon-box-img" type="warn" size="75"></icon>
        </view>

        <view class="weui-dialog__hd" v-if="err.error_msg !== 'OCR识别失败' && err.error_msg !== '证件日期识别失败'">
            <strong class="weui-dialog__title">{{err.ErrorMsg}}</strong>
        </view>
        <view class="weui-dialog__hd" v-else style="margin-bottom:0">
            <strong class="weui-dialog__title">{{err.ErrorMsg}}</strong>
            <view>
                <label style='color:#989898;' v-if="err.error_msg == 'OCR识别失败'">请根据规范重新拍摄</label>
                <label style='color:#989898;' v-if="err.error_msg == '证件日期识别失败'">请按规范重新拍摄</label>
                <image src='https://s.beta.gtimg.com/GodIdent/huiyan-ui-new/images-wx/ocr-fail.png' style="width:100%;height:150px;margin:50rpx 0;" />
            </view>
        </view>
        <view class="weui-dialog__ft">
            <view @click="switchDialog" :class="cmsConfig.Common.IsWxNative ? 'weui-dialog__btn weui-dialog__btn_primary color-green' : 'weui-dialog__btn weui-dialog__btn_primary'" hover-class="bg-gray">我知道了</view>
        </view>
    </view>
    
  </view>
  <!--dialog--> 
</block>
</view>



</template>
<script>
export default {
  props: {
    // 必要的初始化参数
    isShow: {
      type: Boolean,
      default: false
    },
    err: {
      type: Object,
      default: ""
    },
    type:{
      type: String,
      default: 'message'  //  message || dialog
    }
  },
  data() {
    return {
      showErrorMsg: false,
      cmsConfig: uni.faceidVerifySdkCmsConfig,
      token: uni.faceidVerifySdkToken,
      baseUrl: uni.faceidVerifySdkBaseUrl,
      curPage: uni.faceidVerifySdkCurPage
    };
  },
  computed:{
  },
  watch: {
		isShow: {
			handler(newVal,oldVal) {
        this.showErrorMsg = newVal;
        // this.$nextTick(() => {
        // console.log('this.$refs',this.$refs)
        //   if(newVal){
        //     this.$refs.popup.open()
        //   }
        // })
        
			},
			immediate: true
		},
  },
  onLoad() {
    this.cmsConfig = uni.faceidVerifySdkCmsConfig;
    this.baseUrl = uni.faceidVerifySdkBaseUrl;
    this.token = uni.faceidVerifySdkToken;
    this.curPage = uni.faceidVerifySdkCurPage;
  },
  methods: {
    // Close errorToast
    switchDialog() {
      // click I know
      this.showErrorMsg = !this.showErrorMsg;
      this.$emit('iknow')
    }
  }
};
</script>

<style scoped>
.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.weui-dialog {
  position: fixed;
  z-index: 5000;
  width: 75%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  text-align: center;
  overflow: inherit;
  border-radius: 5px;
}

.weui-dialog .weui-icon_area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
}

.weui-dialog__hd {
  padding: 1.3em 1.6em 0.5em;
  padding-top: 50px;
  margin-bottom: 20px;
  line-height: inherit;
}

.weui-dialog__ft {
  position: relative;
  line-height: 48px;
  font-size: 18px;
  border-top: 0.5px solid #ccc;
}

.weui-dialog__btn_primary {
  color: #2d72f1;
}

.weui-dialog .weui-icon_area .iconbg {
  position: absolute;
  top: 10rpx;
  bottom: 10rpx;
  left: 10rpx;
  right: 10rpx;
  background: #fff;
  border-radius: 100%;
}

.weui-dialog.style2 .weui-icon_area .icon-box-img {
  position: relative;
}

.weui-dialog__title {
  font-weight: 400;
  font-size: 18px;
}

.bg-gray {
  background: rgba(155, 155, 155, 0.1);
}
</style>

